import React, { useState, useEffect } from 'react'
import { Space, Table, Button } from 'antd'
import { getUserList } from '../../api/user'
import { connect } from 'react-redux'
const { Column } = Table
function Com(props) {
  const [userList, setUserList] = useState([])

  useEffect(() => {
    getUserList().then(res => {
      console.log(res.data.data)
      setUserList(res.data.data)
    })
  }, [])

  const [flag, setFlag] = useState(false)
  return (
    <Space style={{ width: '100%'}}>
      <Table dataSource = { userList } rowKey = "userid">
        <Column title="序号" render={(text, record, index) => <span>{index + 1}</span>} />
        <Column title="用户名" dataIndex="userid" />
        <Column title="手机号" dataIndex="tel" render={(text, record, index) => <Space>
          <div>
            <span onClick = {() => {
              // 如果是超级管理员，可以查看手机号，如果是普通管理员，没有权限
              props.role > 1 ? setFlag(true) : setFlag(false)
            }}>
              { flag ? null : '***********' }
            </span>
            <span>
              { flag ? text: null}
            </span>
          </div>
          
        </Space>} />
        <Column title="操作" render={(text, record, index) => <Space>
          <Button>删除</Button>
        </Space>} />

      </Table>
    </Space>
  )
}

export default connect(state => ({
  role: state.getIn(['user', 'role'])
}))(Com)


